<script>
import ShoppingCart from './components/ShoppingCart.vue';
export default {
  name: "root component",
  components: {
    ShoppingCart
  },
  data() {
    return {
      goods: [
        { id: 1234, name: 'Java从入门到放弃', price: 99, amount: 7 },
        { id: 2233, name: 'Java从没入门到放弃', price: 88, amount: 4 },
        { id: 4321, name: '骗你学Vue之你行你上啊', price: 56, amount: 1 },
      ]
    }
  },
  methods: {
    amountChange( { id, amount } ){
      let g = this.goods.find( g => g.id == id );
      if( g ) {
        g.amount = amount;
      }
    },
    removeGoods( id ) {
      let index = this.goods.findIndex( g => g.id == id );
      if( index != -1 ) {
        this.goods.splice( index, 1 );
      }
    }
  },
  beforeCreate() {
    console.log( 'root component: before create' );
  },
  created() {
    console.log( 'root component: created' );
    // 监听购物车项目数量改变事件
    this.$bus.on( '数量改变', this.amountChange );
    this.$bus.on( '删除商品', this.removeGoods );
  },
  // 向后代组件提供数据
  provide() {
    console.log( 'root component: provide' );
    return {
      items: this.goods
    }
  },
  // 注入在应用层上提供的数据
  inject: [ 'company' ]
};
</script>

<template>
  <el-container>
    <el-header class="top"></el-header>
    <el-container class="middle">
      <el-aside width="200px" class="left"></el-aside>
      <el-main>
        <ShoppingCart v-bind:items="goods"></ShoppingCart>
      </el-main>
    </el-container>
    <el-footer class="bottom">
      {{company}}
    </el-footer>
  </el-container>
</template>

<style lang="less">
@bgcolor: #f4f4f4;
body {
  padding: 0; 
  margin: 0;
}
.top {
  background: @bgcolor;
}
.middle {
  min-height: 300px;
}

.middle .left {
  background: @bgcolor - 50;
}
.bottom {
  background: @bgcolor;
}
</style>
